<template>
  <section>
    <el-form label-width="20px" inline>
      <el-form-item label="" style="border: 0px solid red;">
        <search-tool v-on:search="searchEvent"></search-tool>
      </el-form-item>
      <el-form-item v-if="courseDefineId">
        <el-button size="mini" type="primary" @click="addBtn">+</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="classList">
      <el-table-column type="index" label="序号"/>
      <el-table-column label="标题">
        <template slot-scope="scope">
          <el-popover placement="right" width="200" trigger="hover" :content="scope.row.description">
            <span slot="reference">{{scope.row.title}}</span>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="开课时间" prop="start" :formatter="timeFormatter"/>
      <el-table-column label="结课时间" prop="end" :formatter="timeFormatter"/>
      <el-table-column label="人数" v-if="courseDefineId">
        <template slot-scope="scope">
          {{scope.row.min}} ~ {{scope.row.max}}
        </template>
      </el-table-column>
      <el-table-column label="学员" v-if="!courseDefineId">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="setLeaner(scope.row)">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <el-tag class="tag" :type="statusList.find(s=>s.val === scope.row.status).type" @click="editStatus(scope.row)">
            {{statusList.find(s=>s.val === scope.row.status).name}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="editBtn(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click='delBtn(scope.row)' >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-show="totalPage>0" style="margin-top:10px;" small layout="prev, pager, next" :page-count="totalPage" @current-change="goPage"/>
    <el-dialog :visible.sync="editDialog" :title="currClass.id?currClass.title+'-编辑':'新建'" v-if="editDialog" width="80%"
                @close="getClassList(0,filterObj)" >
      <edit-class :currClass="currClass" v-on:cancel="getClassList(0,filterObj)"></edit-class>
    </el-dialog>
    <el-dialog :visible.sync="learnerDialog" title="学员管理" v-if="learnerDialog" width="80%">
      <learner-list :course="currClass"></learner-list>
    </el-dialog>
  </section>
</template>

<script>
  import learnerList from '@/components/course/learner/learnerList'
  import searchTool from '@/common/searchTool'
  import editClass from './editClass'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler'
  import dateFormater from '@/common/date-formater'
  export default {
    name: "index",
    components:{searchTool,editClass,learnerList},
    data(){
      return{
        classList:null,
        totalPage:0,
        editDialog:false,
        learnerDialog:false,
        currClass:null,
        filterObj:{},
        statusList:[
          {name:'未开始',val:1,type:''},
          {name:'已开始',val:2,type:'warning'},
          {name:'授课中',val:3,type:'success'},
          {name:'已结束',val:4,type:'info'},
        ]
      }
    },
    computed:{
      courseDefineId(){
        return parseFloat(this.$route.params.id)
      },
      ...mapGetters(['department']),
    },
    watch:{
      courseDefineId(nv,ov){
        if(nv) this.getClassList()
      }
    },
    created(){
      this.getClassList()
      console.log('课程定义id------',this.courseDefineId)
    },
    methods:{
      ...mapActions({
        fetch: 'fetch'
      }),
      setLeaner(row){
        this.currClass=row
        this.learnerDialog=true
      },
      editStatus(row){
        console.log('tag？？？',row)
        let e=row.status
        if(e === 1) this.startClass(row.id)
        else if(e === 2){
          console.log('当前为开始中，要变成授课中')
        }else if(e === 3){
          console.log('当前为授课中，要变成结束')
        }
      },
      startClass(id){
        this.fetch({name:"startClass",data:{id}})
          .then(res=>{
            console.log('startClass-------',res)
            this.$message({type:'success',message:'课程已开始，可以进行签到等事宜。'})
            let index = this.classList.findIndex(c=>c.id === id)
            console.log('没有？？？',index)
            if(index>=0) this.classList[index].status = res.status
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      timeFormatter(a,b,c,d){
        return dateFormater.format(c)
      },
      addBtn(){
        this.currClass={title:'',description:'',courseDefineId:this.courseDefineId,start:null,end:null,min:null,max:null}
        this.editDialog=true
      },
      goPage(val){
        this.getClassList(val-1,this.filterObj)
      },
      searchEvent(e){
        this.filterObj.key=e
        this.getClassList(0,this.filterObj)
      },
      getClassList(pageNo,filterObj){
        this.fetch({name:"getClassList",data:{page:pageNo? pageNo:0,...filterObj,courseDefineId:this.courseDefineId?this.courseDefineId:null}})
          .then(res=>{
            console.log('class列表-------------',res.content)
            this.classList = res.content
            this.totalPage = res.totalPages
            this.editDialog=false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      editBtn(row){
        this.currClass=row
        this.editDialog=true
      },
      delBtn(row){
        this.$confirm('确认删除？')
          .then(()=> {
            this.fetch({name:"delClass",data:{id:row.id}})
              .then(res=>{
                this.$message({type: 'success',message: '删除成功！'})
                this.getClassList(0,this.filterObj)
              })
              .catch(err=>{
                console.log(err)
                errHandler.handle(this,err)
              })
          })
          .catch(() => {
            this.$message({type: 'info',message: '已取消删除'})
            this.loading = false
          })
      },
    }
  }
</script>

<style scoped>
.tag{
  cursor: pointer;
}
</style>
